<template>
  <div class="order-commit-info">
    <div class="block">
      <div class="content">
        <order-info
            :order="order"
            :order-detail="orderDetail"
            :is-detail="isDetail"
        ></order-info>
      </div>
    </div>
    <div class="block">
      <div class="content">
        <div class="title">{{ $t('packet.商品信息') }}</div>
        <goods-data-info
            :goodsData="order.goodsData"
        ></goods-data-info>
      </div>
    </div>
    <div class="block">
      <!--<div class="content">-->
      <!--  <div class="title">{{ $t('packet.包裹信息') }}</div>-->
      <!--  <package-box :order="order"></package-box>-->
      <!--</div>-->
      <div class="content">
        <div class="title">{{ $t('packet.买家信息') }}</div>
        <buyer-box :order="order"></buyer-box>
      </div>
    </div>
    <div class="block">
      <div class="content">
        <div class="title">{{ $t('其他信息') }}</div>
        <el-form>
          <el-form-item
              :label="$t('备注')"
              prop="remark"
          >
            <el-input :value="order.remark" type="textarea" :rows="3" maxlength="40" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import OrderInfo from "@/views/packetOrders/components/OrderInfo.vue";
import GoodsDataInfo from "@/views/packetOrders/components/GoodsDataInfo.vue";
import PackageBox from "@/views/packetOrders/components/PackageBox.vue";
import BuyerBox from "@/views/packetOrders/components/BuyerBox.vue";

export default {
  components: {BuyerBox, PackageBox, GoodsDataInfo, OrderInfo},
  props: {
    order: {
      type: Object,
      default: () => {
        return {
          goodsData: []
        }
      }
    },
    orderDetail:{
      type: Object,
      default() {
        return {};
      },
    },
    isDetail: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {}
  },
  created() {

  },
  methods: {}
}
</script>

<style scoped lang="less">
.order-commit-info{
  .block{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    & > div{
      flex: 1 1 auto;
    }
    .title{
      font-weight: bold;
      font-size: 18px;
      padding: 0 0 20px;
    }
    .content{
      padding: 0 0 20px;
    }
  }
}

</style>
